<!--
 * @Author: zzj liberty666@aliyun.com
 * @Date: 2023-09-11 18:18:18
 * @LastEditors: zzj liberty666@aliyun.com
 * @LastEditTime: 2023-09-11 19:00:17
 * @FilePath: \vite-project\src\views\home\temp.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <h1>人脸识别展示页面</h1>
    <!-- 循环遍历图片和人脸框数据 -->
    <div v-for="item in faceData" :key="item.faceBox.id">
      <!-- 图片展示区域 -->
      <div class="image-container">
        <img :src="item.imageUrl" alt="Detected Face" />
        <div
          class="face-box"
          :style="{
            left: item.faceBox.x + 'px',
            top: item.faceBox.y + 'px',
            width: item.faceBox.width + 'px',
            height: item.faceBox.height + 'px',
          }"
        ></div>
      </div>

      <!-- 人脸信息展示区域 -->
      <div class="face-info">
        <h2>人脸信息</h2>
        <ul>
          <li>
            <strong>ID:</strong>
            {{ item.faceBox.id }}
            <br />
            <strong>x:</strong>
            {{ item.faceBox.x }}
            <br />
            <strong>y:</strong>
            {{ item.faceBox.y }}
            <br />
            <strong>width:</strong>
            {{ item.faceBox.width }}
            <br />
            <strong>height:</strong>
            {{ item.faceBox.height }}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { queryFace } from '@/api/user'
export default {
  name: 'FaceImageApp',
  data() {
    return {
      faceData: [],
    }
  },
  mounted() {
    this.fetchFaceData()
  },
  methods: {
    fetchFaceData() {
      queryFace()
        .then((response) => {
          console.log(response)
          if (response.code === 200) {
            this.faceData = response.data
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
  },
}
</script>
<style>
.image-container {
  position: relative;
  margin-bottom: 20px;
  width: 300px;
  height: 300px;
}
.image-container img {
  width: 100%;
  height: 100%;
}
.face-box {
  position: absolute;
  border: 2px solid red;
}
</style>
